<template>
	<view class="content-wrap">
		<li-input-table class="data-table" :columns="tableColumns"  :toolbar="toolbar"
			v-bind="{ ...table }" height="300" :pagination="pagination" :search-form-data="searchFormData"
			:init-search-param="{'deleted': false}">
		</li-input-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchFormData: {
					model: {
						supplier: "四川驻颜堂药业有限公司",
						account_period: 1,
						purchaser: "",
						transport_mode: "",
						temperature: 0,
						receipt_date: null,
						store:'建安堂大药房'
					},
					config: {
						inline: true,
					},
					items: [{
							label: "供应商",
							prop: "supplier",
							el: "el-input",
							size: "small",
							type: "text",
							placeholder: "",
							readonly: true,
						},
						{
							label: "账期",
							prop: "account_period",
							el: "el-input",
							size: "small",
							type: "number",
						},
						{
							// mode of transport
							label: "运输方式",
							prop: "transport_mode",
							el: "el-select",
							size: "small",
							options: [{
									el: "el-option",
									value: "货车",
									label: "货车"
								},
								{
									el: "el-option",
									value: "小汽车",
									label: "小汽车"
								}
							]
						},
						{
							label: "采购员",
							el: "el-input",
							prop: "purchaser",
							type: "text",
							size: "small",
						},
						{
							label: "收货日期",
							el: "el-date-picker",
							prop: "receipt_date",
							placeholder: "请选择收货日期",
							type: "datetime",
							size: "small",
							format: "YYYY/MM/DD HH:mm:ss"
						},
						{
							label: "到货温度",
							prop: "temperature",
							el: "el-input",
							size: "small",
							type: "number",
							placeholder: "请输入到货温度",
							extra: {
								el: "el-text",
								label: "℃",
								style: "margin-left:5px;"
							}
						},
						{
							label: "当前入库场所：",
							el: "el-text",
							prop: "store",
							size: "small",
						},
					],
					rules: {
						name: [{
								required: true,
								message: 'Please input Activity name',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 5,
								message: 'Length should be 3 to 5',
								trigger: 'blur'
							},
						],
					},
					submitBtn: {
						txt: "添加",
						type: "primary",
						click: this.clickSearchSubmit
					},
				},
				toolbar: {
					exportExcel: {
						name: "table.xls", //文件名
						type: "xls", //支持xls，csv
						fields: {
							"用户名": "name",
							"手机号码": "phone",
							"用户状态": "status",
							"邮箱": "email",
							"角色": "role",
							"日期": "date"
						}
					}
				},
				table: {
					// height: "250",
					"show-summary": true,
					//SummaryMethodProps
					"summary-method": function(param) {
						const {
							columns,
							data
						} = param
						const sums = []
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[index] = 'Total Cost'
								return
							}
							const values = data.map((item) => Number(item[column.property]))
							if (!values.every((value) => Number.isNaN(value))) {
								sums[index] = `$ ${values.reduce((prev, curr) => {
						        const value = Number(curr)
						        if (!Number.isNaN(value)) {
						          return prev + curr
						        } else {
						          return prev
						        }
						      }, 0)}`
							} else {
								sums[index] = 'N/A'
							}
						})

						return sums
					},
					border: true,
					localdata: [{
							key: 1,
							date: '2016-05-03',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							phone: '133xxxx1234',
							email: "abc@qq.com",
						},
						{
							key: 2,
							date: '2016-05-02',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							phone: '133xxxx1234',
							email: "abc@qq.com",
						},
						{
							key: 3,
							date: '2016-05-04',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							email: "abc@qq.com",
							phone: "131xxxx6789"
						},
						{
							key: 4,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							phone: '133xxxx1234',
							email: "abc@qq.com"
						},
						{
							key: 5,
							date: '2016-05-03',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							phone: '133xxxx1234',
							email: "abc@qq.com"
						},
						{
							key: 6,
							date: '2016-05-02',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							phone: '133xxxx1234',
							email: "abc@qq.com"
						},
						{
							key: 7,
							date: '2016-05-04',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 8,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 9,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 10,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						}
					],
				},
				tableColumns: [{
						type: "index",
						label: "#",
						width: 80
					},
					{
						prop: "date",
						label: "Date",
						width: "180",
						sortable: true,
						editable: true,
					},
					{
						prop: "name",
						label: "Name",
						width: "180",
					},
					{
						prop: "address",
						label: "Address",
					},
					{
						label: "Contact",
						prop: "phone",
						label: "Phone",
						width: "180"
					},
					{
						prop: "email",
						label: "Email",
					}
				],
				pagination: {
					// total: 500, // 总记录条数
					pageSize: 5, // 每页显示的记录条数
					currentPage: 1,
					layout: "total, sizes, prev, pager, next, jumper"
				},

			};
		},
		onLoad() {
			console.log(JSON.stringify({
				searchFormData:this.searchFormData,
				toolbar: this.toolbar,
				...this.table,
				tableOperations: this.tableOperations,
				pagination: this.pagination,
				columns:this.tableColumns
			}));
		},
		
		methods: {
			clickSearchSubmit(model) {
				console.log("clickSearchSubmit:", model);
			}
		}
	}
</script>

<style>
	.content-wrap {
		display: flex;
		flex-direction: column;
		/*align-items: center;
		justify-content: center; */
		padding: 10px;

	}

	.data-table {
		.el-button {
			margin-bottom: 15px;
		}
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}
</style>